@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
img,fieldset {
	border: 0px;
}
.fn-left {
	float: left;
}
.fn-right {
	float: right;
}
.fn-clear {

}
a {
	text-decoration: none;
	color: #0088cc;
}
.fn-clear::after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
}
.btn {
    position: relative;
    padding: 4px 12px;
    margin: 0;
    color: #555;
    white-space: nowrap;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    background-color: #f3f3f3;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
}
.btn-blank {
    border: 1px solid #188DFC;
    background: transparent;
    color: #188DFC;
}
.btn-primary {
    border: 1px solid #188DFC;
    color: #ffffff;
    background: #188DFC;
}
.btn-mini {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 15px;
}
a.btn {
    display: inline-block;
}
h5 {
    font-size: 14px;
    line-height: 20px;
}
[class^="build-icon-"],[class*=" build-icon-"] {
	background: url("../img/build-icon.png") no-repeat scroll -58px 0 ;
	height: 20px;
	width: 20px;
	display:block;
	*zoom:1;
}
.build-icon-minus {
	background-position:-20px 0;
}
select,textarea, input[type="text"], input[type="password"] {
	background-color: #ffffff;
	border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    display: inline-block;
    height: 20px;
    padding: 3px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
}
textarea {
    padding-right: 4px;
}
.input-mini {
    width: 60px;
}
select {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    height: 28px;
    line-height: 28px;
}
table {
	border-collapse: collapse;
    border-spacing: 0;
}
.table {
    width: 100%;
    th {
    	font-weight: bold;
    }
    th,td {
	    padding: 5px;
	    line-height: 20px;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dddddd;
    }
}
.table-bordered {
    border: 1px solid #dddddd;
    border-collapse: separate;
    border-left: 0;
}
.data-table {
	th,td {
    	background: #F8F8F8;
	    color: #666;
	    border-top: 1px solid #E2E2E2;
    	border-left: 1px solid #dddddd;
    	vertical-align: middle;
	}
	td {
		font-size: 12px;
		i {
			font-size: 13px;
		}
	}
}
.select-box {
    border: 1px solid #DDD;
    margin-top: -1px;
    background: #fff;
}
.ocode {
    width: 25px;
    text-align: center;
}
.option-txt {
    width: 95%;
}
.text-success {
    color: #468847;
}
.text-warning {
    color: #c09853;
}
.text-info {
    color: #3a87ad;
}
/***正文***/
.designer-header {
	position:relative;
	z-index:5;
	height:60px; 
	padding:5px 0px;
	background:#F0F0F0;
	.build-back {
		width: 60px;
		height: 70px;
		padding-left: 70px;
		font-size: 20px;
		line-height: 70px;
		color: #454545;
		margin: -5px 0px;
		background: #d6d6d6 url("../img/build-back.png") no-repeat 20px 50%;
	}
	.survey-step {
		margin-top: 3px;
	}
	.designer-nav{
		display: inline-block; 
		padding: 0px 20px;
		text-align: center;
		color: #7A7A7A;
		font-size: 14px;
		font-weight: 600;
		&:hover {
			opacity: 0.6;
			filter: alpha(opacity=60);
			color: #EA5504;
		}
		&.active {
			opacity: 1;
			filter: alpha(opacity=100);
			color: #EA5504;
			font-size: 14px; 
			font-weight: 600;
		}
		i {
			    display: block;
    			background: url("../img/design_step.png") no-repeat;
			    width: 30px;
			    height: 30px;
			    margin: 0 auto 3px;
			    &.mh1 {
			    	background-position: 0px -31px;
			    }
			    &.mh2 {
			    	background-position: -31px 0px;
			    }
			    &.mh3 {
			    	background-position: -62px 0px;
			    }
		}
	}
	.survey-title {
	    color: #555;
	    font-size: 15px;
	    font-weight: 700;
	    margin: 15px;
	    text-align: center;
	    width: 500px;
	    overflow: hidden;
	    .title {
		    display: inline-block;
		    max-width: 450px;
		    overflow: hidden;
		    height: 22px;
		    vertical-align: middle;
		}
		i {
		    margin-left: 8px;
		    color: #188dfc;
		}
	}
	.survey-btn {
		margin: 15px 30px 0 0;
		.survey-word {
		    width: 28px;
		    height: 28px;
		    background: url("../img/build1.png") no-repeat -16px -190px;
		    display: inline-block;
		    vertical-align: middle;
		}
	}
}
#survey-build {
	position: relative;
    border-top: 1px solid #EFDB9F;
    background: #EFEEEC;
    #build-box {
    	position: relative;
    	#build-left {
    		position: fixed;
		    left: 0;
		    top: 71px;
		    bottom: 0;
		    z-index: 3;
		    width: 241px;
		    background: #FFFFEA;
		    border-right: 1px solid #EFDB9F;
		    #question-type-box {
		    	overflow-y: auto;
    			height: 100%;
    			h5 {
				    border-bottom: 1px solid #CFCBC2;
				    margin: 8px;
				    padding: 5px 2px;
				    position: relative;
				}
				ul {
					margin-left: 5px;
					li {
						display: inline-block;
						width: 100px;
    					margin: 3px;
						a {
							color: #555;
						    display: block;
						    height: 22px;
						    line-height: 22px;
						    border: 1px solid #FFFFEA;
						    img {
						    	vertical-align: top;
    							margin: 3px 5px 0;
						    }
						}
					}
				}
		    }
    	}
    	#build-right {
		    position: relative;
		    overflow: hidden;
		    border-left: 1px solid #ddd;
		    margin-left: 250px;
		    #question-wrap {
		    	position: relative;
		    	min-height: 560px;
			    margin-right: 330px;
			    padding-bottom: 60px;
			    background: #fff;
			    border-right: 1px solid #ddd;
			    #question-box {
				    min-height: 560px;
				    overflow: hidden;
				    >li {
					    margin: 10px 20px 10px 15px;
					    border: 1px solid #FFF;
					    position: relative;
					    padding: 5px 26px 5px 0;
					    z-index: 2;
					    &.active {
						    background: #EFF6FF;
						    border: 1px solid #C2D7EF;
						}
						&:hover {
						    border: 1px dashed #9DA4BD;
						    cursor: pointer;
						}
						.question-title {
							font-size: 14px;
    						padding: 5px;
    						.question-code {
							    margin-right: 5px;
							    vertical-align: top;
							    float: left;
							}
							.question-split {
								position: relative;
								hr {
								    border-bottom: 1px dashed #FFFFFF;
								    border-top: 2px dashed #CCCCCC;
								    margin: 15px 0;
								}
								div {
								    background: #fff;
								    position: absolute;
								    top: -10px;
								    left: 50%;
								    margin-left: -30px;
								    width: 60px;
								    text-align: center;
								    color: #666666;
								    font-weight: bold;
								}
							}
							.question-question {
							    overflow: hidden;
							    min-height: 20px;
							}
						}
						.question-answer {
							padding: 0 20px 5px;
    						overflow-x: auto;
    						.read-radio {
							    background: url("../img/read-radio.gif") no-repeat scroll -4px 4px;
							}
    						.read-check {
							    background: url("../img/read-check.gif") no-repeat scroll -4px 4px;
							}
							ul {
								li {
									padding: 2px 3px 2px 17px;
								    position: relative;
								    color: #666;
								    min-height: 20px;
								    vertical-align: top;
								}
								&.format2,&.format3,&.format4,&.format5,&.format6,&.format7,&.format8,&.format8 {
									li {
										display: inline-block;
    									margin-right: 5px;
									}
								}
								&.format2 {
									li {
										width: 45%;
									}
								}
								&.format3 {
									li {
										width: 28%;
									}
								}
								&.format4 {
									li {
										width: 21%;
									}
								}
								&.format5 {
									li {
										width: 13%;
									}
								}
								&.format6 {
									li {
										width: 10%;
									}
								}
								&.format7 {
									li {
										width: 8%;
									}
								}
							}
							b {
								&.read-select {
							    background: url("../img/read-dropdown-arrow.gif") no-repeat scroll right 2px #F9F7F5;
								}
								&.read-select,&.read-input {
								    display: inline-block;
								    font-weight: 500;
								    min-width: 200px;
								    border: 1px solid #DCDBD6;
								    height: 30px;
								    line-height: 30px;
								    padding: 0 10px;
								    background-color: #F9F7F5;
								}
								&.read-input {
									width: 180px;
								}
							}
							.suffix {
							    display: inline-block;
							    font-weight: 700;
							    vertical-align: top;
							    line-height: 32px;
							}
						}
						.question-action {
							float: right;
    						width: 20px;
    						.build-icon-minus{
    							position:absolute;
    							top:2px;
    							right: -12px;
    						}
    						.build-icon-copy{
    							position:absolute;
    							bottom:0;
    							right: -12px;
    						}
    						.build-icon-arrow {
    							position:absolute;
    							top:50%;
    							right: -21px;
    							background:url("../img/build-arrow.png") no-repeat; 
    							width:16px; 
    							height:28px;
    							margin-top: -14px;
    							visibility:hidden;
    						}
						}
					}
				}
		    }
		    #question-edit-box {
			    width: 300px;
			    position: absolute;
			    right: 0;
			    top: 0;
			    height: 100%;
			    background: #EFF6FF;
			    border-left: 1px solid #C2D7EF;
			    padding: 10px;
			    z-index: 3;
			    #question-edit {
				    position: absolute;
				    top: 0px;
				    fieldset {
					    margin-bottom: 10px;
					    legend {
					    	margin: 5px 0;
    						color: #666;
    						display: block;
    						width: 100%;
					    }
					    #editor-bar {
							.btn {
								border-radius: 0;
    							margin-right: 2px;
							}
					    }
						.question-text {
						    margin-top: -1px;
						    height: 60px;
						    border-radius: 0;
						    width: 281px;
						}
					}
					.question-type {
						fieldset {
							float: left;
						    margin-right: 45px;
						}
					}
					.table {
					    background: #fff;
					}
					.data-table {
					    td {
					    	border-top: 1px solid #DDD;
					    	text-align: center;
					    }
					}
				}
			}
    	}
    }
}
.draggable-holder {
	width:300px;
	z-index:11;
	*zoom:1;
	padding:10px;
	font-size:14px;
	border:1px dashed #CCC;
	background:#FFFFEA;
}
